<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>


    // DOM常用属性必须已经放在页面中渲染的DOM对象元素

        document.body.appendChild(div)
        console.log(div.clienWidth,div.clienHeight)

// 需要先把放在页面中，再进行输出

//    --------------------------------------------------------------     

        // clientWidth  clientHeight     客户宽高   边框以内的所有宽高之和-滚动条宽高(不含边框)
        // offsetWidth  offsetHeight     偏移宽高   DOM元素在页面中占位的宽高(含边框)
        // scrollWidth  scrollHeight    滚动区域宽高 (实际内容高度)


        // console.log(document.body.clientWidth,document.body.clientHeight);
        // console.log(document.body.offsetWidth,document.body.offsetHeight);
        // console.log(document.body.scrollWidth,document.body.scrollHeight);
        // scrollWidth会变为内容宽度，其余两者的宽度是页面的宽度，高度都一样


        // console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//可视区域宽高-滚动条宽高
        // console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight)//body宽高+margin
        // console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);//没有滚动条也是可视区域宽高，滚动区域内容的宽高，如果这个高度不足可视区域高度，按可视区域算

// ----------------------------------------------------------------------------------------------------------------------
        // clientLeft  clientTop   客户位置      边线宽高
        // offsetLeft  offsetTop    偏移位置     元素左上角的相对位置
        // scrollLeft  scrollTop    滚动条位置  滚动条位置  可读可写


        // document.body  document.documentElement
        // 初始化第一次渲染时，页面中的滚动条不可以设置，当第一次渲染完毕，交互时有效

       
        // document.addEventListener("click",clickHandler);

        // function clickHandler(e){
        //     document.documentElement.scrollTop=300;      现在用的方式
        //     document.body.scrollTop=300;                 以前用的方式
        // }
// 当点击时添加事件，此时页面已经渲染完毕，可以对滚动条位置进行更改，更改时需要考虑游览器的兼容问题
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   </script>
</body>
</html>